<template>
    <div class="list">
        <div>分类页</div>
        <van-tabs v-model="activeName" @click="upList" sticky>
            <van-tab v-for="item in navData" :key="item.id" :title="item.name" :name="item.name">
                <p>{{item.name}}</p>
                <p>{{item.front_desc}}</p>
            </van-tab>
        </van-tabs>
        <van-row type="flex" justify="space-around" class="list-container">
            <van-col span="10" v-for="item in list" :key="item.id" class="list-content" @click="goDetail(item.id)">
                <img :src="item.list_pic_url" alt="" class="list-img">
                <p>{{item.name}}</p>
                <p>{{item.retail_price}}起</p>
            </van-col>
        </van-row>
    </div>
</template>

<script>
import {categoryNav,categoryList,} from '@/axios/index'
export default {
    name: 'secCategory',

    data() {
        return {
            navData:[],
            currentNav:{},
            activeName:'',
            list:[],
        };
    },
    async created(){
        // console.log(this.$route.params.id);

        let res= await categoryNav({'id':this.$route.params.id});
        this.navData=res.navData
        this.currentNav=res.currentNav
        this.activeName=this.currentNav.name
        console.log(this.navData,this.currentNav);
        // 获取分类商品列表
        let rec = await categoryList({categoryId:this.$route.params.id})
        console.log(rec);
        this.list=rec.data
    },
    mounted() {
    },

    methods: {
        async upList(name){
            // 根据name查找对应的id
            let id = this.navData.find(el=>el.name==name).id;
            let rec = await categoryList({categoryId:id})
            // console.log(rec);
            this.list=rec.data
        },
        goDetail(id){
            this.$router.push({name:"categoryDetail",params:{"id":id}})
        }
    },
};
</script>

<style scoped lang="scss">
.list{
    .list-container{
        .list-content{
            .list-img{
                width: 40%;
            }
        }
    }
}
</style>